﻿var value1 = 0;
var value2 = 0;
var lightFlag = 0;


function OpenLight() { lightFlag = 1; };
function CloseLight(){ lightFlag = 0; };

function IncMeter1(){ if(value1<=178) value1+=2; };
function DecMeter1(){ if(value1>= 2) value1-=2; };

function IncMeter2(){ if(value2<=97.5) value2+=2.5; };
function DecMeter2(){ if(value2>= 2.5) value2-=2.5; };

function ResetValue(){  value1 = 0; value2 = 0; };
function SetValue2() {  value2 = 100; };

function  DrawMeterFun(context){
              
                if (context)
                {
                        var point = { x: 180, y: 130 };     //圆心坐标，相对于画布
                        var radius = 90;                   //半径
                        var start = -1.5 * Math.PI;        //起始弧度

                        context.setLineWidth(30)
                        context.setStrokeStyle('#91C7AE')  
                        context.setFillStyle('#91C7AE');

                        for( var i = 0; i <=9; i++ )
                        {
                                var stop = start + 0.15 * Math.PI ;     //结束弧度
                                var x = Math.floor(70 * Math.cos(start)) + 180;
                                var y = Math.floor(70 * Math.sin(start)) + 130;
                                var v = 20 * i;

                                if (i >= 7)
                                        context.fillText(v.toString(), x - 10, y);
                                   
                                else
                                        context.fillText(v.toString(), x, y-3);

                                if (i == 9)
                                        break;

                                context.beginPath();    //开始新的路径

                                context.arc( point.x, point.y, radius, start, stop - 0.003 * Math.PI, false);     //画一段圆弧

                                context.stroke();                         //填充路径

                                context.closePath();                    //关闭路径
                                start = stop;

                                if (i == 2)
                                {
                                        context.setStrokeStyle('rgba(255, 128, 0, 1)')//('#63869E')
                                        context.setFillStyle('#63869E');
                                }
                                else if (i == 6)
                                {
                                        context.setStrokeStyle('#C23531')
                                        context.setFillStyle('#C23531');
                                }
                        }

                   //----------------------------------------------------//
                        //画背光弧 
                        context.beginPath()                    //开始路径
                        context.setLineWidth(10)
                        if( lightFlag>0 ) context.setStrokeStyle( 'rgba(255, 0, 0, 1)');
                        else context.setStrokeStyle( 'rgba(0, 0, 0, 1)');
                        context.arc( point.x, point.y, 130, -1.5 * Math.PI, -0.15 * Math.PI, false);
                        context.stroke()
                        context.closePath();   
                        //----------------------------------------------------
                        //画背光灯
                        // Create circular gradient
                        var grd = context.createCircularGradient(180, 130, 70)                        
                        if( lightFlag>0 ) grd.addColorStop(0, 'blue')
                        else grd.addColorStop(0, 'black')
                        grd.addColorStop(1, 'white')
                        context.beginPath()
                        // Fill with gradient
                        context.setFillStyle(grd)
                        context.fillRect(140,90, 80,80)
                        //context.fillRect(0,0, 480,272)
                        context.closePath();    
                        //----------------------------------------------------                        
                        radius = 110;
                        start = -1.5 * Math.PI; 
                        context.setLineWidth(22)
                        context.setStrokeStyle('#91C7AE')   
                        for( var i = 0; i < 90; i++ )           // 画50个刻度，即共10个大格，每个小格中画5个刻度
                        {
                                var stop = start + 0.015 * Math.PI ;

                                context.beginPath();

                                context.arc( point.x, point.y, radius, start, stop - 0.003 * Math.PI, false);

                                context.stroke();

                                context.closePath();
                                start = stop;

                                if (i == 29)
                                {
                                        context.setStrokeStyle('rgba(255, 128, 0, 1)')
                                }
                                else if (i == 69)
                                {
                                        context.setStrokeStyle('#C23531')
                                }
                        }


                        {   //画指针
                                //var value1 = 77;     //表盘当前值
                                var radius = 85;
                                var x = Math.floor(radius * Math.cos((-1.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;
                                var y = Math.floor(radius * Math.sin((-1.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;

                                context.beginPath();

                                //context.setFillStyle('rgba(255, 0, 123, 0.3)');
                                context.setFillStyle('rgba(20, 50, 120, 1)');
                                context.moveTo(x, y)

                                radius = 15;
                                x = Math.floor(radius * Math.cos((-1 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;
                                y = Math.floor(radius * Math.sin((-1 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;
                                context.lineTo(x, y);

                                radius = 20;
                                x = Math.floor(radius * Math.cos((-0.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;
                                y = Math.floor(radius * Math.sin((-0.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;
                                context.lineTo(x, y);

                                radius = 15;
                                x = Math.floor(radius * Math.cos((0 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;
                                y = Math.floor(radius * Math.sin((0 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;
                                context.lineTo(x, y);

                                context.fill();

                                context.setTextAlign('center')
                                context.fillText(value1.toString(), 200, 250)

                                context.closePath();
                        }
                       //context.draw();                
                 
                }
               //========================================= small meter =====================================================
                //IncMeter2();
      


                //var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
                if (context)
                {
                        

                        var point = { x: 380, y: 240 };     //圆心坐标，相对于画布
                        var radius = 50;                   //半径
                        var start = -0.8 * Math.PI;        //起始弧度

                        context.setLineWidth(30)
                        context.setStrokeStyle('#91C7AE')
                        context.setFillStyle('#91C7AE');

                        for( var i = 0; i <= 4; i++ )
                        {
                                var stop = start + 0.15 * Math.PI ;     //结束弧度
                                var x = Math.floor(90 * Math.cos(start)) + point.x;
                                var y = Math.floor(90 * Math.sin(start)) + point.y;
                                var v = 25 * i;
                                
                        
                                if (i >= 2)
                                        context.fillText(v.toString(), x-10 , y);
                                else
                                        context.fillText(v.toString(), x, y);

                                if (i == 4)
                                        break;

                                switch(i){
                                        case 0: context.setStrokeStyle('#ff0000');  break;
                                        case 1: context.setStrokeStyle('#ff7f00');  break;
                                        case 2: context.setStrokeStyle('#91C7AE');  break;
                                        case 3: context.setStrokeStyle('#00ff00');  break;
                                        default:  break;
                                }


                                context.beginPath();    //开始新的路径

                                context.arc( point.x, point.y, radius, start, stop - 0.006 * Math.PI, false);     //画一段圆弧

                                context.stroke();                         //填充路径

                                context.closePath();                    //关闭路径
                                start = stop;

                                if (i == 1)
                                {
                                        context.setStrokeStyle('#63869E')
                                        context.setFillStyle('#63869E');
                                }
                                else if (i == 7)
                                {
                                        context.setStrokeStyle('#C23531')
                                        context.setFillStyle('#C23531');
                                }
                        }

                   //----------------------------------------------------//
                        //画背光弧 
                        context.beginPath()                    //开始路径
                        context.setLineWidth(10)
                        if( lightFlag>0 ) context.setStrokeStyle( 'rgba(255, 0, 0, 1)');
                        else context.setStrokeStyle( 'rgba(0, 0, 0, 1)');
                        context.arc( point.x, point.y, 120, -0.8 * Math.PI, -0.2 * Math.PI, false);
                        context.stroke()
                        context.closePath();   
                        //----------------------------------------------------

                        {   //画指针
                                //var value = value2;     //表盘当前值
                                var radius = 65;
                                var x = Math.floor(radius * Math.cos((-0.8 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;
                                var y = Math.floor(radius * Math.sin((-0.8 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;

                                context.beginPath();

                                //context.setFillStyle('rgba(0, 0, 255, 0.7)');
                                context.setFillStyle('rgba(20, 50, 120, 1)');
                                
                                context.moveTo(x, y)

                                radius = 8;
                                x = Math.floor(radius * Math.cos((-0.3 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;
                                y = Math.floor(radius * Math.sin((-0.3 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;
                                context.lineTo(x, y);

                                radius = 10;
                                x = Math.floor(radius * Math.cos((0.20 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;
                                y = Math.floor(radius * Math.sin((0.20 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;
                                context.lineTo(x, y);

                                radius = 8;
                                x = Math.floor(radius * Math.cos((0.65 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;
                                y = Math.floor(radius * Math.sin((0.65 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;
                                context.lineTo(x, y);

                                context.fill();

                                context.setTextAlign('center')
                                //context.fillText(value.toString(), 200, 250)
                                context.fillText(value2.toString(), point.x, 345)

                                context.closePath();
                        }



                        //context.draw();
                }           
           
           
        context.draw();  


};


var page = {

    /* 此方法在第一次显示窗体前发生 */
    onLoad:function(event){
                             DecMeter1(); 
                            var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象 
                             DrawMeterFun(context);
                 // CloseLight();
    },

    /* 此方法展示窗体前发生 */
    onShow:function(event){

    },

    /* 此方法关闭窗体前发生 */
    onExit:function(event){

    },

    onButtonA : function(e) {
    console.log("onButton1 event -------------------");
	console.dir(e);     
     //==========================================big meter=============================================
		  //DecMeter1();   
		  ResetValue()
		  SetValue2()
		  OpenLight();
	     //==========================================big meter=============================================
		  DecMeter1();   
		 // CloseLight();
		var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
		DrawMeterFun(context);
                                
	}, 

    onButtonB : function(e) {

	      console.dir(e);          
		  ResetValue();  
		  CloseLight();
	     //==========================================big meter=============================================
		  DecMeter1();   
		 // CloseLight();  
         		var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
		  DrawMeterFun(context);                               
	}, 
   
    onButtonC : function(e) {

	console.dir(e); 
    IncMeter1(); 
    IncMeter2();        
    var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
		  DrawMeterFun(context);         
   
	}, 

    onButtonD : function(e) {

	console.dir(e);          
    DecMeter1();   
    DecMeter2(); 
    var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
		 DrawMeterFun(context);       
      
                                 
	}, 

    onButtonE : function(e) {

	console.dir(e);          
	//pm.navigateTo({url: "page2/page2"});
	pm.navigateBack();          
                                 
	}, 

};

Page(page);

page = 0;
